<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" class="password"><span></span>
</body>
<script>

  var pw = document.querySelector(".password");

  // - 数字，字母，特殊字符
    // - 任意一种，弱
    // - 任意两种，中
    // - 三种，强


  pw.oninput = function(){
    var str = this.value;
    // 为空时，清空提示，不需要验证
    if(str === ""){
      this.nextElementSibling.innerHTML = "";
      return;
    }
    // 准备用来记录数字，字母，特殊字符是否出现
    var a = 0;
    var b = 0;
    var c = 0;
    // 遍历输入框中的内容
    for(var i=0;i<str.length;i++){
      // 判断是否出现数字
      if(str[i] >= 0 && str[i] <= 9){
        a = 1;
      }
      // 判断是否出现字母
      if(str[i] >= "a" && str[i] <= "z" || str[i] >= "A" && str[i] <= "Z"){
        b = 1;
      }
      // 判断是否出现特殊字符
      if( !( str[i] >= 0 && str[i] <= 9 || str[i] >= "a" && str[i] <= "z" || str[i] >= "A" && str[i] <= "Z" ) ){
        c = 1;
      }
    }
    // 遍历技术后，将三种记录加起来，判断出现了几种
    switch(a + b + c){
      case 1:
        this.nextElementSibling.innerHTML = "弱";break;
      case 2:
        this.nextElementSibling.innerHTML = "中";break;
      case 3:
        this.nextElementSibling.innerHTML = "强";break;
    }
  }


  // 作业：使用 提示条 显示密码强度
  
  
</script>
</html>